<template>
	<NavBar :obj="{ title: '联系客服', color: '#000', backgroundColor: 'transparent' }" />
	<image src="/static/kefu/bg_kefubj@2x.png" class="bg"></image>
	<view class="fill">
		<view class="top flex items-center justify-between">
			<view>Hi~，有什么可以帮您！</view>
			<image src="/static/kefu/img_kefustu@2x.png"></image>
		</view>

		<view class="mobile flex items-center justify-between">
			<image src="/static/kefu/ic_lxkfphone.png" class="icon"></image>
			<view class="box flex-1">
				<view class="tips">客服电话</view>
				<view class="val">{{ info.contact_mobile }}</view>
			</view>
			<view class="btn" @click="makePhoneCall">拨打</view>
		</view>

		<view class="mobile flex justify-between flex-col">
			<view class="flex items-center justify-between">
				<image src="/static/kefu/ic_lxkfwxkef.png" class="icon"></image>
				<view class="box flex-1">
					<view class="tips">微信客服</view>
					<view class="val"></view>
				</view>
			</view>
			<image
				:src="imgUrl + info.contact_wechat"
				class="icon"
				style="margin-left: 130rpx; width: 268rpx; height: 268rpx"
				@click="showPreviewImage([imgUrl + info.contact_wechat])"
			></image>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { port, goBack, hint, imgUrl, showPreviewImage } from '/service/port';
	import { onLoad, onShow } from '@dcloudio/uni-app';

	const info = ref({});

	async function getContact() {
		let res = await port('getContact');
		info.value = res.data;
	}

	function makePhoneCall() {
		uni.makePhoneCall({
			phoneNumber: info.value.contact_mobile
		});
	}

	onShow(() => {
		getContact();
	});
</script>

<style scoped lang="scss">
	.bg {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
	}
	.fill {
		position: relative;
		padding: 30rpx;
		.top {
			> view {
				font-weight: 400;
				font-size: 30rpx;
				color: #000;
			}
			> image {
				width: 218rpx;
				height: 226rpx;
			}
		}
		.mobile {
			margin-top: 30rpx;
			background: #ffffff;
			border-radius: 20rpx;
			padding: 20rpx;
			.icon {
				width: 110rpx;
				height: 110rpx;
			}
			.box {
				margin-left: 20rpx;
				.tips {
					font-weight: 400;
					font-size: 26rpx;
					color: #231e1f;
				}
				.val {
					font-weight: 500;
					font-size: 32rpx;
					color: #231e1f;
					margin-top: 22rpx;
				}
			}

			.btn {
				font-weight: 400;
				font-size: 28rpx;
				color: #ffffff;
				background: linear-gradient(-90deg, #ec1b24 0%, #ff2825 100%);
				border-radius: 28rpx;
				padding: 8rpx 30rpx;
			}
		}
	}
</style>
